<template>
   <div :id="uuid"  class="echarsBox" ></div>
</template>

<script setup>
import { ref,defineProps,defineEmits,onMounted,getCurrentInstance,watch } from 'vue';
import * as echarts from 'echarts';
import { colProps } from 'element-plus';
const props = defineProps({
 echartsOption: {
 type: Object,
 required: true,
},
});
watch(() => props.echartsOption, (val) => {
 init()
});


var uuid = new Date().getTime()+Math.random().toString(32).slice(2, 10)
var myChart;
const emit = defineEmits(["childEvent"])

const init = () => {
myChart = echarts.init(document.getElementById(uuid));
myChart.setOption(props.echartsOption);
}


onMounted (() => {
 init()
 
window.addEventListener(
 "resize",
 () => {
   myChart.resize()
   myChart.dispose();
   emit('childEvent')

 }
)
})


const someMethod = () => {
 return {
 }
}
</script>

<style scoped>
.echarsBox{
 width: 100%;
 height: 100%;
}

</style>

